<template>
	<Layout :pagebg="1" class-name="away layout-bg showH">
    <fa-navbar title="开吃吧"></fa-navbar>
    <view class="typeTab paddLR flex-lect" :style="{top:topH+'px'}">
      <view v-for="item in typeTabs" :key="item.id" class="item" :class="{on: typeId == item.id}" @click="typeId = item.id">{{item.name}}</view>
    </view>
    <!-- 最新 -->
    <view class="box flow-box" :class="{show : typeId == 2}">
      <custom-waterfalls-flow :value="newData.list" image-key="image_text" @wapperClick="goDetail"></custom-waterfalls-flow>
    </view>
    <!-- 最热 -->
    <view class="box flow-box" :class="{show : typeId == 1}">
      <custom-waterfalls-flow :value="hoteData.list" image-key="image_text" @wapperClick="goDetail"></custom-waterfalls-flow>
    </view>
    <!-- <view class="" style="width: 100%; height: 8000rpx;"></view> -->
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
				keyWords:'',	
        isDelShow:false,
        tabList:[
          {name:'全部', id:0},
          {name:'报名中', id:2},
          {name:'待开赛', id:3},
          {name:'开赛中', id:4},
          {name:'已结束', id:5},
        ],
        tabId:0,
        emptyShow:false, // 空
        
        typeTabs:[
          {name:'最新', id:2},
          {name:'最热', id:1},
        ],
        typeId:2,
        newData:{
          page:1,
          list:[],
          isLast:false,
        },
        hoteData:{
          page:1,
          list:[],
          isLast:false,
        },
			}
		},
    computed: {
      topH() {
        const systemInfo = uni.getSystemInfoSync();
        // 通常顶部导航栏高度：iOS 一般为 44 或 48，Android 一般为 48 或 56
        // 这里根据你的设计调整
        let navBarHeight = systemInfo.platform === 'ios' ? 44 : 48;
        
        // 判断是否固定导航栏
        return systemInfo.statusBarHeight + navBarHeight;
      }
    },
    onLoad(){
      this.getList1();
      this.getList2();
    },
		methods: {
			search(value) {
				
			},
      chooseTabId(id){
        this.tabId = id
      },
      linkTo(item){
        console.log('进入详情页', item)
        uni.navigateTo({
          url:'/home/match/detail?id='+item.id
        })
      },
      goDetail(item){
        console.log('111111111')
        uni.navigateTo({
          url:'/home/strategy_detail?type=2&id='+item.id
        })
      },
      // 最新列表
      getList1(){
        this.$api.mukbangListsApi({page: this.newData.page, type_id: 2}).then(res=>{
          if(!this.newData.isLast) {
            this.newData.page++;
            this.newData.list = [...this.newData.list, ...res.data.data];
            this.newData.isLast = false;
          }else{
            this.newData.isLast = true;
          }
          console.log('this.matchData----------', this.newData.list)
        }).catch(()=>{
          getApp().hideLoad()
        })
      },
      // 最热列表
      getList2(){
        this.$api.mukbangListsApi({page: this.hoteData.page, type_id: 1}).then(res=>{
          if(!this.hoteData.isLast) {
            this.hoteData.page++;
            this.hoteData.list = [...this.hoteData.list, ...res.data.data];
            this.hoteData.isLast = false;
          }else{
            this.hoteData.isLast = true;
          }
          console.log('this.matchData----------', this.newData.list)
        }).catch(()=>{
          getApp().hideLoad()
        })
      },
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      if(!this.newData.isLast) {
        this.getList1()
      };
      if(!this.hoteData.isLast) {
        this.getList2()
      };
    }
	}
</script>
<style>
page{background-color: #fff;}
</style>
<style lang="scss" scoped>
.typeTab{
  padding: 30rpx 0 16rpx; border-bottom: 1px solid #EEEEEE; background-color: rgba(255,255,255,0.8);
  .item{
    display: flex; align-items: center; justify-content: center; height: 60rpx; padding: 0 30rpx; border-radius: 60rpx; margin-right: 30rpx;
    &.on{background-color: #4FAD95; color: #fff;}
  }
  
}



</style>
